<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上下滑动菜单</title>
<style>
body {
	background-image: url(http://pic.nipic.com/2007-12-04/2007124103849886_2.jpg);
	background-repeat: repeat;
}

/* http://www.sharejs.com */
.menu_wrap {
	left: 0px;
	top: 0px;
	right: 0px;
	z-index: 999;
	width: 100%;
	height: 50px;
	background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* webkit */
	-webkit-box-shadow: 0px 2px 5px #000000;
	-moz-box-shadow: 0px 2px 5px #000000;
	box-shadow: 0px 2px 5px #000000;
	position: fixed;
	margin-top:-30px;
}
.menu_links ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.menu_links ul li {
	display: inline;
}
.menu_links ul li a {
	float:left;
	line-height: 50px;
	padding-right: 20px;
	padding-left: 20px;
	color: #FFF;
	font-size: 22px;
	text-decoration: none;
	text-shadow: -1px -1px 1px #333;
	display: block;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
}
.menu_links ul li a:hover {
		color: #000;

		text-shadow: -1px -1px 1px #EEE;
	background: #ffffff; /* old browsers */

background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* webkit */

}

.menu_buttons {
	float:right;
	line-height: 50px;
	height: 50px;
	margin-right: 30px;
}
.menu_buttons ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.menu_buttons ul li {
	display: inline;
	height: 50px;
}
.menu_buttons ul li a {
	float:left;
	padding-right: 10px;
	display: block;
	border:none;
	line-height: 50px;
	padding-left: 10px;
	height: 50px;
	padding-top: 10px;
	
	 }
	
.first {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFF;
}
.menu_links {
	height: 50px;
	float: left;
	margin-left: 100px;
}

.content {
	height: 400px;
	width: 600px;
	margin-top: 100px;
	margin-right: auto;
	margin-left: auto;
	background-color: #666;
	-webkit-border-radius: 10px;
	
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
	color: #FFF;
	padding: 20px;
	border: 5px solid #333;
}
</style>
<!--添加jQuery库的引用-->
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">	
	$(document).ready( function () {		
		if($.browser.msie){                        //如是为IE，则设置IE的背景色以及定位方式
		   $('.menu_wrap').css({'background-color' : '#b8e1fc','position' : 'absolute','width' : '100%'});
		}	
		$('.menu_wrap').css({'opacity' : '0.3'});  //指定菜单的透明度		
		$('.menu_wrap').hover ( function () {     //为菜单关联hover事件，当鼠标经过时
			//使用animate动画调整菜单当前的顶部距离，使之显示在页面上
			$(this).animate({'margin-top' : '0px','opacity' : '1'});	
		}, function () {
			//鼠标移出时，使用animate函数动画隐藏菜单的一部分的显示
			$(this).animate({'margin-top' : '-30px','opacity' : '0.3'});
	
		});	
	});
</script>
</head>
<body>
<!--定义一个显示的菜单-->
<div class="menu_wrap">
	<div class="menu_links">
      <ul>
        <!--菜单项-->
        <li><a class="first" href="#">网站首页</a></li>
        <li><a href="#">关于本公司</a></li>
        <li><a href="#">客服热线</a></li>
        <li><a href="#">合作伙伴</a></li>
      </ul>
	</div>
</div>
</body>
</html>
